پنل اختصاصی دوره های حضوری / آنلاین
قوانین سایت
درباره ما
همکاری با ما
فروشگاه
DevMinds.co
devmindco@gmail.com
صفحه اصلی
دوره ها
صفر تا فول استک
مقالات
مهارت های نرم
0
ورود / ثبت نام
پنل اختصاصی دوره های حضوری / آنلاین
قوانین سایت
درباره ما
همکاری با ما
فروشگاه
دسته بندی آموزش ها
دوره ها
صفر تا فول استک
مقالات
مهارت های نرم
لیست دروس
به صفحه تمرینات بروید
دوره آموزشی ریسپانسیو دیزاین (flexBox+CssGrid+Sass+BootStrap)
بازگشت به صفحه دوره
مقدمات
نکات قبل از شروع دوره
مقدمات ریسپانسیو دیزاین
مهمترین اصل های بین المللی در طراحی یک سایت حرفه ای
13:48
بررسی اصل WebPerformance
بررسی اصل ResponsiveDesign
نحوه کار با دستور Float
flexBox
آشنایی با دستور justify-content
آشنایی با دستور Align-Items
آشنایی با دستور Flex-Direction
آشنایی با دستور Flex-Wrap
05:03
آشنایی با دستور Flex-Flow
آشنایی با دستور Align-Content
دسته دوم دستورات FlexBox (دستور order)
آشنایی با دستور Flex-Grow
12:42
آشنایی با دستور Flex-Shrink
06:03
آشنایی با دستور Flex-Basis
آشنایی با دستور Flex
آشنایی با دستور Align-Self
جمع بندی مباحث FlexBox
تمرین مباحث FlexBox
CssGrid
مقدمات CssGrid
مهمترین بخش های CssGrid
دسته بندی دستورات CssGrid
Grid-Template-Row/Column
Gutter/Grid-Column/Row-Gap
استفاده از دستور ()Repeat
آشنایی با دستور Fractal(Fr)
12:06
positioningGrid
کاربرد دستور span
12:00
تمرین 1 مباحث CssGrid
حل تمرین 1
آشنایی با Explicit | Implicit
07:30
Grid-Auto-Row/Column/Flow
کاربرد دستور Dense
min/max/minmax
auto-fill/auto-fit
justify-self&align-self
justify-items&align-items
justify-content&align-content
grid-template-area&grid-area
جمع بندی مباحث cssgid
تمرین مبحث CssGrid
اصل های بین المللی ریسپانسیو دیزاین
اصل دوم - Correct Unit
08:18
relative units-em
09:24
relative units-rem
09:17
percentage unit
view port
جمع بندی مباحث Correct Unit
10:25
آشنایی با مدیا کوئری
بررسی بهترین واحد برای مدیا کوئری
DesktopFirst&MobileFirst
Flexible Image
ریسپانسیو پروژه اول (سایت فیلیمو )
شروع ریسپانسیو پروژه گام اول ( سایت فیلیمو)
ریسپانسیو هدر پروژه
بررسی یک تکنیک طلایی در ریسپانسیو دیزاین
09:50
ریسپانسیو اسلایدر
ریسپانسیو محبوب ترین فیلم ها
ریسپانسیو بخش فیلم / سریال
بررسی BreackPoint های هر Device
ریسپانسیو بخش Educations
ریسپانسیو بخش FreeMovie
ریسپانسیو بخش Kids
ریسپانسیو بخش Cinema
ریسپانسیو بخش comments
ریسپانسیو بخش Questions
ریسپانسیو بخش Details
ریسپانسیو بخش Footer پروژه
بررسی نهایی ریسپانسیو پروژه
ایجاد Hamburger Menu
کار با دستورات جی کوئری
مقدمه بوت استراپ
مقدمه بوت استرپ
انواع روش های نصب بوت استرپ
09:36
آشنایی با Breakpoints ها
07:01
آشنایی با Containers
آشنایی با GridSystems - بخش اول
آشنایی با GridSystems - بخش دوم
Row-cols در GridSystems
آشنایی با columns&Gutter
آشنایی با Typography&Image
آشنایی با Table
آشنایی با form-control
آشنایی با Select&Range
آشنایی با CheckBox&Radio
آشنایی با inputGroup&Layout
آشنایی با Validation
Background&Border&Color
آشنایی با کلاس های Flex
Link&ObjectFit&Opacity
آشنایی با کلاس های Positions
Sizing&Spacing
Text & Vertical Align
آشنایی با components ها ( بخش اول )
آشنایی با components ها (بخش دوم)
آشنایی با components ها ( بخش سوم)
آشنایی با components ها (بخش چهارم)
شخصی سازی بوت استراپ با SASS
ساختار بندی اولیه پروژه دیجی کالا
ساختار بندی 1-7 ساس در پروژه دیجی کالا
الحاق فایل های SASS بوت استراپ به پروژه دیجی کالا
شخصی سازی رنگ ها در بوت استرپ به وسیله ی SASS
نحوه استفاده از MAPهای SASS
استفاده از map ها در شخصی سازی پروژه
13:11
شخصی سازی root پروژه
الحاق فونت به پروژه + شخصی سازی فونت
شخصی سازی spacing های بوت استرپ
12:06
شخصی سازی mixin ها در SASS
ساختار بندی و شخصی سازی پروژه سایت دیجی کالا
ریسپانسیو پروژه دوم ( دیجی کالا )
ساختار بندی بخش header سایت دیجی کالا
ساختار بندی بخش Navbar پروژه دیجی کالا
کار با کتابخانه swiper js
ساخت اسلایدر (Story) مشابه دیجی کالا
ساخت اسلایدر (Story) مشابه دیجی کالا (بخش دوم)
ساخت sliderScroll پروژه دیجی کالا
ساخت sliderScroll پروژه دیجی کالا ( بخش دوم )
ساختار بندی بخش Brands
اسلایدر پیشنهاد شگفت انگیز سایت دیجی کالا (بخش اول)
اسلایدر پیشنهاد شگفت انگیز سایت دیجی کالا (بخش دوم)
اسلایدر پیشنهاد شگفت انگیز سایت دیجی کالا (بخش سوم)
ساختار بندی بخش (بنر سوپرمارکت) دیجی کالا
